<template>
  <div class="Reg_sterStylerBox">
    <div class="Reg_sterStyleRgbaImgX">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Fback_pic%2F04%2F00%2F35%2F4857fcfb8367ec1.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648294554&t=563dd640a0375723d282a8452eb176bb"
        alt=""
      />
      <router-link to="/login"><button @click="LoginFromRout" class="LoginBtn">登录</button></router-link>
      
    </div>

    <div class="Reg_sterStylerFrom">
        <div class="Reg_sterHeader">
            <p class="Reg_Log">®</p>
            <h1>注册账号</h1>
        </div>
        <p class="RegFromBox"><font style="fontSize:20px;">账号:&nbsp;</font><input class="RegFromIpt" v-model="from.phone" placeholder="请你输入账号" type="text"></p>
        <p class="RegFromBox"><font style="fontSize:20px;">邮箱:&nbsp;</font><input class="RegFromIpt" v-model="from.email" placeholder="请你输入邮箱" type="text"></p>
        <p class="RegFromBox"><font style="fontSize:20px;">昵称:&nbsp;</font><input class="RegFromIpt" v-model="from.nickname" placeholder="请你输入昵称" type="text"></p>
        <p class="RegFromBox"><font style="fontSize:20px;">头像:&nbsp;</font><input class="RegFromIpt" v-model="from.avatar" placeholder="请你输入头像地址" type="text"></p>
        <p class="RegFromBox"><font style="fontSize:20px;">密码:&nbsp;</font><input class="RegFromIpt" v-model="from.password" placeholder="请你输入密码" type="password"></p>
        <p class="RegFromBtN"><button @click="RegFromAddBtn" class="RegFromAddBtn">确定</button><button @click="RegFromNoBtn" class="RegFromBtnNo">取消</button></p>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';
export default {
  data() {
    return {
      from:{
        phone:"",
        email:"",
        nickname:"",
        avatar:"",
        password:"",
      }
    }
  },
  created() {
    this.RegFromAddBtn();//确定按钮
    this.RegFromNoBtn();//取消按钮
    this.LoginFromRout();//返回登录按钮
  },
  methods: {
    //注册按钮
    async RegFromAddBtn(){
    let res = await Axios.post("/api/register",{...this.from});
    console.log(res,"Res");
    },
    RegFromNoBtn(){
    },
    LoginFromRout(){
      
    }
  },

};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
.Reg_sterStylerBox {
  width: 100%;
  height: 100%;
}
.Reg_sterStyleRgbaImgX {
  width: 1000px;
  height: 600px;
  margin: 50px auto;
}
.Reg_sterStyleRgbaImgX > img {
  width: 100%;
  height: 100%;
}
.Reg_sterStylerFrom{
   top: 100px;
  left: 800px;
  width: 400px;
  height: 480px;
  border-radius: 20px;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}
.Reg_Log{
    font-weight: bold;
    position: absolute;
    right: 252px;
    font-size: 30px;
    color: rgb(255, 0, 106);
}
.Reg_sterHeader{
    width: 200px;
    margin-left: 100px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.RegFromIpt{
    width: 250px;
    height: 40px;
    border-radius: 10px;
    outline: none;
    padding: 5px;
}
.RegFromBox{
  margin-left: 50px;
}
.RegFromBtN{
  margin-top: 50px;
}
.RegFromAddBtn{
  width: 150px;
  height: 40px;
  outline: none;
  border-radius: 20px;
  margin-left: 30px;
  font-weight: bold;
  background: rgb(158, 224, 82);
  color: rgb(255, 0, 106);
}
.RegFromBtnNo{
   width: 150px;
  height: 40px;
  outline: none;
  border-radius: 20px;
  margin-left: 30px;
  font-weight: bold;
  background: rgb(224, 82, 82);

  color: rgb(255, 255, 255);
}
.LoginBtn{
  width: 100px;
  height: 30px;
  border-radius: 15px;
  font-weight: bold;
  outline: none;
  background: rgb(145, 255, 255);
  color: red;
  top: 80px;
  left: 300px;
  position: absolute;
}
</style>